<template>
	<div class="wrapper">
		<div class="header">
			<div class="dia header_box" style="justify-content: space-between;">
				<div class="dia">
					<div class="date" @click="chooseDate">
						{{startTime}}-{{endTime}}
					</div>
					<div class="dis">
						<img src="../../assets/terminal/arrow_down.png" alt="" class="arrow_down" />
					</div>
				</div>
				<div class="dia" @click="channelShow">
					<div class="date">
						{{channelText}}
					</div>
					<div class="dis">
						<img src="../../assets/terminal/arrow_down.png" alt="" class="arrow_down" />
					</div>
				</div>
			</div>
			<div class="dis">
				<div class="choice_box dia" style="justify-content: space-between;">
					<div class="today dis" :class="active==0?'week':'today_week'" @click="quantum(0)">
						当日
					</div>
					<div class="today dis" :class="active==1?'week':'today_week'" @click="quantum(1)">
						本周
					</div>
					<div class="today dis" :class="active==2?'week':'today_week'" @click="quantum(2)">
						本月
					</div>
				</div>
			</div>
			<div class="dis constent_box">
				<div class="constent">
					<div class="">
						交易统计
					</div>
					<div class="dia" style="justify-content: space-between;margin-top: 20px;">
						<div class="stroke">
							<div class="">
								交易笔数
							</div>
							<div class="pseudorostrum">
								{{avgTransactionsCount}}
							</div>
						</div>
						<div class="stroke stroke_a">
							<div class="">
								交易均额
							</div>
							<div class="pseudorostrum">
								￥{{avgTransactions}}
							</div>
						</div>
					</div>
					<!-- <div ref="echartsContainer" style="width: 600px; height: 400px;"></div> -->
					<div class="dis">
						<div id="myEcharts" style=" width: 331px; height: 291px ;top:-16px"></div>
					</div>
					<!-- <div class="dia money" v-for(item,indedx) >
						<div class="">
							4389.12
						</div>
						<div class="">
							4389.12
						</div>
						<div class="">
							4389.12
						</div>
						<div class="">
							4389.12
						</div>
					</div> -->
				</div>
			</div>
			<!-- <div class="dis constent_box">
				<div class="constent">
					<div class="">
						收益统计
					</div>
					<div class="dis">
						<div id="Echarts" style=" width: 331px; height: 291px ;top:-30px"></div>
					</div>
					
				</div>
			</div> -->
			<div class="client">
				<div class="detail_box">
					<div class="detail">
						终端统计
					</div>
					<div class="analysis">
						<div class="dia" style="justify-content: space-between;"
							@click="navUrl('/terminalSum','minal')">
							<div class="dia">
								<div class="dis">
									<img src="@/assets/terminal/terminal.png" alt="" />
								</div>
								<div class="totality_font">
									终端总数
								</div>
							</div>
							<div class="totality">
								{{totalTerminals}}
							</div>
						</div>

					</div>
					<div class="analysis_con dia">
						<div class="analysis_list" v-for="(item,index) in tabList" :key="index" :class="item.class"
							@click="navUrl(item.url,index)">
							<div class="">
								<img :src="item.img" alt="" />
							</div>
							<div class="" style="margin-top: 12px;">
								{{item.name}}
							</div>
							<div class="analysis_num">
								{{item.activation || 0}}
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="early_box">
				<div class="early">
					<div class="">
						预警分析
					</div>
					<div class="analysis dia" style="justify-content: space-between;"
						@click="navUrl('/activationRate',2)">
						<div class="dia">
							<div class="dis">
								<img src="../../assets/terminal/nonactivated.png" alt="" />
							</div>
							<div class="nonactivated">
								未唤醒预警
							</div>
						</div>
						<div class="dis">
							<img src="../../assets/terminal/arrow_right_black.png" alt="" class="arrowRight" />
						</div>
					</div>
					<div class="analysis dia" style="justify-content: space-between;"
						@click="navUrl('/activationRate',3)">
						<div class="dia">
							<div class="dis">
								<img src="../../assets/terminal/inactive.png" alt="" />
							</div>
							<div class="nonactivated">
								无交易预警
							</div>
						</div>
						<div class="dis">
							<img src="../../assets/terminal/arrow_right_black.png" alt="" class="arrowRight" />
						</div>
					</div>

				</div>
			</div>

		</div>
		<van-overlay :show="show" class-name="overlay">
			<div class="quantum">
				<!-- <div class="quantum_query dia">
					<div class="cancel" @click="show=false">
						取消
					</div>
					<div class="ensure">
						确定
					</div>
				</div>
				<div class="ascertain dia">
					<div class="dia" style="flex-direction: column;"
						:class="timeActive==0?'make_time make_animation':'sure_time'" @click="abort(0)">
						<div class="">
							起始时间
						</div>
						<div class="make">
							2024年10月1日
						</div>
					</div>
					<div class="dia" style="flex-direction: column;" :class="timeActive==1?'make_time':'sure_time'"
						@click="abort(1)">
						<div class="">
							截止时间
						</div>
						<div class="make">
							-年-月-日
						</div>
					</div>
					<div class="line_bot" ref="barRef">

					</div>
				</div> -->
				<div>
					
					<van-picker-group title="日期选择" :tabs="['开始日期', '结束日期']" @confirm="onConfirm" @cancel="onCancel">
						<van-date-picker v-model="startDate" :min-date="minDate" :max-date="maxDate" />
						<van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
					</van-picker-group>
				</div>
				<!-- <div class="annual_box">
					<div class="dia annual">
						<div class="annual_year" style="overflow: scroll;height: 200px;" @scroll="scroll"
							@scrollend="scrollend" ref="pickerRef">
							<div class="dis " v-for="(year,index) in years" :key="year"
								style="height: 40px;flex-direction: column" :class="indexType==index?'choose_time':''">
								{{ year }}年
							</div>
						</div>
						<div class="annual_year" style="overflow: scroll;height: 200px;" @scroll="scroll_month" @scrollend="scrollend"
							ref="pickerRef_month">
							<div class="dis" v-for="(month,index)  in months" :key="month"
								style="height: 40px;flex-direction: column;" :class="indexMonth==index?'choose_time':''">
								{{ month }}月
							</div>
						</div>

						<div class="annual_year" style="overflow: scroll;height: 200px;" @scroll="scroll_day" @scrollend="scrollend"
							ref="pickerRef_day">
							<div class="dis" v-for="(day,index)  in days" :key="day" style="height: 40px;flex-direction: column"
								:class="indexDay==index?'choose_time':''">
								{{ day }}日
							</div>
						</div>


					</div>
					<div class="annual_choose dia">
						<div class="dis" style="height: 40px;flex-direction: column;">
							{{chooseYears}}年
						</div>
						<div class="">
							{{chooseMonth}}月
						</div>
						<div class="">
							{{ chooseDay }}日
						</div>
					</div>
				</div> -->

			</div>
		</van-overlay>
		<van-overlay :show="isshow" class-name="overlay">
			<div class="quantumchannel ">
				<div class="quantum_query dia">
					<div class="cancel" @click="isshow=false">
						取消
					</div>
					<div class="ensure" @click="queryChannel">
						确定
					</div>
				</div>
				<div class="dia" style="flex-wrap: wrap;">
					<!--  -->
					<div v-for="(item,index) in channelList" :key="index"
						:class="index!=0&&index!=4&&index!=8?'ditch_right':'ditch_rights'"
						@click="channelChanse(index)">
						<div class="dia ditch" :class="channelindex==index?'ditch_left':''">
							{{item.channelName}}
						</div>
					</div>
				</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
	import {
		selectLocalAgentData,
		selectAgentChannel
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import * as echarts from "echarts";
	// import {onMounted, onUnmounted} from "vue";
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	export default defineComponent({
		name: 'quantitative',
		setup() {
			// const router = useRouter()
			const routers = useRouter()
			const router = useRoute()
			let myEcharts = echarts;
			let Echarts = echarts;
			const state = reactive({
				active: 0,
				// pageStart: 1,
				// pageSize: 10,
				// loading: false,
				// finished: false,
				// list: [],
				show: false,
				startDate: [],
				endDate: [],
				endTime: "",
				startTime: "",
				chartsList: [],
				isshow: false,
				channelList: [],
				channelindex: 0,
				channelText: "",
				channelName: "",
				channelCode: "",
				tabList: [{
						name: "唤醒数",
						img: "https://mtpospay.com/activation_a.png",
						class: "activation_a",
						activations: "",
						url: "/activationRate"
					},
					{
						name: "绑定数",
						img: "https://mtpospay.com/activation_b.png",
						class: "activation_b",
						activations: "",
						url: "/activationRate"
					},
					{
						name: "唤醒率",
						img: "https://mtpospay.com/activation_c.png",
						class: "activation_c",
						activations: ""
					},
					{
						name: "绑定率",
						img: "https://mtpospay.com/activation_d.png",
						class: "activation_d",
						activations: ""
					},
					{
						name: "活跃率",
						img: "https://mtpospay.com/activation_e.png",
						class: "activation_e",
						activations: ""
					},
					{
						name: "台均交易",
						img: "https://mtpospay.com/activation_f.png",
						class: "activation_f",
						activations: ""
					}
				],
				profitTotalAmount: "",
				tranTotalAmount: "",
				totalTerminals: "",
				avgTransactions: "0",
				avgTransactionsCount: "0"
				// maxDate: ""
				// timeActive: 0,
				// days: [],
				// years: "",
				// months: "",
				// indexType: 2,
				// indexMonth: 2,
				// indexDay: 2,
				// chooseYears: "",
				// chooseMonth: "",
				// chooseDay: ""
				// currentPage: 1,
				// checkedAll: false,
				// checked: [],
				// numAll: 0,
				// posList: []
			})
			// const startDate = ref(['2020', '01', '01']);
			// const endDate = ref(['2025', '06', '01']);
			//跳转
			const navUrl = (e, index) => {
				if (index == 'minal') {
					routers.push({
						path: e,
						query: {
							searchType: 0,
							bindType: index,
							channelCode: state.channelCode,
							serviceNo: store.state.user.agentNo
						}
					})
				} else if (index == 0) {
					routers.push({
						path: e,
						query: {
							searchType: 1,
							bindType: index,
							channelCode: state.channelCode,
							serviceNo: store.state.user.agentNo
						}
					})
				} else if (index == 1) {
					routers.push({
						path: e,
						query: {
							searchType: 2,
							bindType: index,
							channelCode: state.channelCode,
							serviceNo: store.state.user.agentNo
						}
					})
				} else if (index == 2) {
					routers.push({
						path: e,
						query: {
							searchType: 0,
							bindType: index,
							channelCode: state.channelCode,
							serviceNo: store.state.user.agentNo,
							date: "1"
						}
					})
				} else if (index == 3) {
					routers.push({
						path: e,
						query: {
							searchType: 1,
							bindType: index,
							channelCode: state.channelCode,
							serviceNo: store.state.user.agentNo,
							date: "1"
						}
					})
				} else {
					routers.push({
						path: e,
						query: {
							bindType: index,
						}
					})
				}


			}
			const onConfirm = () => {
				state.list = []
				state.channelCode = state.channelList[state.channelindex].channelCode

				state.pageStart = 1
				state.startTime = state.startDate.join('.')
				state.endTime = state.endDate.join('.')
				getList()

				state.show = false
				// showToast(`${} ${state.endDate.join('.')}`);
			};
			//渠道选择
			const channelChanse = (e) => {
				console.log(e)
				state.channelindex = e
				state.channelCode = state.channelList[e].channelCode

			}
			const onCancel = () => {
				state.show = false
			};
			const chooseDate = () => {
				state.show = true
				// state.chooseYears = state.years[state.indexType]
				// state.chooseMonth = state.months[state.indexType]
				// state.chooseDay = state.days[state.indexType]
				// console.log(state.years[state.indexType])
				// scroll()
			}
			// // 滚动事件
			// const pickerRef = ref()
			// const pickerRef_month = ref()
			// const pickerRef_day = ref()
			// // let timer = null
			// const scroll = (ev) => {
			// 	const scroll = pickerRef.value.scrollTop
			// 	const index = Math.round(scroll / 40)
			// 	state.indexType = index + 2
			// 	state.chooseYears = state.years[state.indexType]
			// 	console.log(state.years[state.indexType])

			// 	// state.selected = renderColumns.value[index + 1].id
			// 	// console.log(scroll, index)
			// }
			// const scroll_month = (ev) => {
			// 	const scroll = pickerRef_month.value.scrollTop
			// 	const index = Math.round(scroll / 40)
			// 	state.indexMonth = index + 2
			// 	state.chooseMonth = state.months[state.indexType]
			// 	// state.selected = renderColumns.value[index + 1].id
			// 	// console.log(scroll, index)
			// }
			// const scroll_day = (ev) => {
			// 	const scroll = pickerRef_day.value.scrollTop
			// 	const index = Math.round(scroll / 40)
			// 	state.indexDay = index + 2
			// 	state.chooseDay = state.days[state.indexType]
			// 	// state.selected = renderColumns.value[index + 1].id
			// 	// console.log(scroll, index)
			// }
			// const scrollend = () => {
			// 	const scroll = pickerRef.value.scrollTop
			// 	const index = Math.round(scroll / 40)
			// 	state.selected = renderColumns.value[index + 1].id
			// 	if (scroll / 40) {
			// 		pickerRef.value.scrollTop = index * 40
			// 	}
			// }
			const barRef = ref(null);
			const startAnimation = () => {

			};
			//渠道查询
			const queryChannel = () => {
				state.list = []
				state.channelCode = state.channelList[state.channelindex].channelCode
				state.channelText = state.channelList[state.channelindex].channelName
				// console.log('aaaa',state.channelText)
				state.pageStart = 1
				state.isshow = false
				getList()
			}
			//切换时间
			const quantum = (e) => {
				state.active = e
				if (e == 1) {
					const currentDate = ref(new Date().toISOString().split('T')[0]);
					const date = new Date(currentDate.value);
					date.setDate(date.getDate() - 6);
					// return ;
					state.startTime = date.toISOString().split('T')[0]
					state.startTime = state.startTime.split('-')
					state.startTime = state.startTime[0] + '.' + state.startTime[1] + '.' + state.startTime[2]
					console.log('当日', state.startTime)
					state.list = []
					state.pageStart = 1
					state.finished = true
					state.loading = false
					getList()
				} else if (e == 2) {
					const currentDate = ref(new Date().toISOString().split('T')[0]);
					const date = new Date(currentDate.value);
					date.setDate(date.getDate() - 29);
					// return ;
					state.startTime = date.toISOString().split('T')[0]
					state.startTime = state.startTime.split('-')
					state.startTime = state.startTime[0] + '.' + state.startTime[1] + '.' + state.startTime[2]
					state.list = []
					state.pageStart = 1
					state.finished = true
					state.loading = false
					getList()
				} else {
					getThatday()
					state.list = []
					state.pageStart = 1
					state.finished = true
					state.loading = false
					getList()
				}
			}
			//生成图表
			// onMounted(() => {
			// 	initChart();
			// });
			//卸载图表
			onUnmounted(() => {
				myEcharts.dispose;
				Echarts.dispose;
			});
			//获取当前时间
			const getThatday = () => {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 注意月份从0开始，需要加1
				let day = currentDate.getDate();
				// state.endDate.push(year)
				// state.endDate.push(month)
				// state.endDate.push(day)
				state.endTime = year + '.' + month + '.' + day
				state.startTime = year + '.' + month + '.' + day
				
				// state.maxDate = new Date(year, month, day)
				console.log('当日时间', state.startTime, state.endTime)
			}
			//获取结束时间
			const getEndday = () => {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 注意月份从0开始，需要加1
				let day = currentDate.getDate();
				// state.endDate.push(year)
				// state.endDate.push(month)
				// state.endDate.push(day)
				return {year,month,day}
				// state.endTime = year + '.' + month + '.' + day
				// state.startTime = year + '.' + month + '.' + day
				
				// state.maxDate = new Date(year, month, day)
				// console.log('当日时间', state.startTime, state.endTime, state.maxDate)
			}
			getThatday()
			//查询渠道
			const channelShow = () => {
				state.isshow = true
				getChannel()
			}
			//查询渠道
			const getChannel = () => {
				selectAgentChannel({
					agentNo: store.state.user.agentNo,
					channelType: "1"
				}).then(res => {
					state.channelList = res.data
					state.channelList.unshift({
						channelName: "全部",
						complete: '0'
					})
					state.channelText = state.channelList[0].channelName
					// console.log(state.channelText,state.channelList[0].channelName)
					// state.channelCode=state.channnelList[0]
				})
			}
			getChannel()
			const getList = () => {
				let parames = {
					agentNo: store.state.user.agentNo,
					startTime: state.startTime,
					endTime: state.endTime
				}
				console.log(state.channelCode)
				if (state.channelCode != '' && state.channelCode != undefined) {
					parames.channelCode = state.channelCode
				}
				selectLocalAgentData(parames).then(res => {
					console.log(res)
					state.chartsList = res.data.transHashMaps //交易
					state.tranTotalAmount = res.data.tranTotalAmount
					// state.list = res.data.profitHashMaps //收益
					state.avgTransactionsCount = res.data.avgTransactionsCount
					state.avgTransactions = res.data.avgTransactions
					state.profitTotalAmount = res.data.profitTotalAmount
					state.totalTerminals = res.data.totalTerminals
					state.tabList[0].activation = res.data.activatedTerminals
					state.tabList[1].activation = res.data.boundTerminals
					state.tabList[2].activation = res.data.activationRate
					state.tabList[3].activation = res.data.bindingRate
					state.tabList[4].activation = res.data.activityRate
					state.tabList[5].activation = res.data.avgTransactionsPerTerminal
					initChart()
					earningsChart()
				})
				// let parames={

				// }
				// selectMerchantSummary().then(res=>{

				// })
			}
			getList()
			//获取日
			// const updateDays = () => {
			// 	const currentDate = new Date();
			// 	let selectedYear = ref(currentDate.getFullYear().toString());
			// 	let selectedMonth = ref((currentDate.getMonth() + 1).toString().padStart(2, '0'));
			// 	// let days = [];
			// 	//获取年月
			// 	state.years = Array.from({
			// 		length: 100
			// 	}, (_, i) => (currentDate.getFullYear() - 50 + i).toString());
			// 	let yearsNull = null
			// 	state.years.push(yearsNull)
			// 	state.years.push(yearsNull)
			// 	console.log(state.years)
			// 	//获取月
			// 	state.months = Array.from({
			// 		length: 12
			// 	}, (_, i) => (i + 1).toString().padStart(2, '0'));
			// 	const year = parseInt(selectedYear.value);
			// 	const month = parseInt(selectedMonth.value);
			// 	const daysInMonth = new Date(year, month, 0).getDate();
			// 	state.days = Array.from({
			// 		length: daysInMonth
			// 	}, (_, i) => (i + 1).toString().padStart(2, '0'));
			// };
			// updateDays()
			//交易图表生成数据
			const initChart = () => {
				// echarts.dispose(chartElement);
				const chartElement = document.getElementById('myEcharts');
				echarts.dispose(chartElement);
				let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
				chart.setOption({
					tooltip: {
						trigger: 'item'
					},
					title: {
						text: '总交易金额',
						subtext: state.tranTotalAmount,
						left: 'center',
						top: '42%',
						textStyle: {
							fontSize: 13,
							color: '#666666',
							fontWeight: '500'
						},
						subtextStyle: {
							fontSize: 15,
							color: '#3D3D3D',
							fontWeight: 'bold'
						}
					},
					legend: {
						bottom: '-4px',
						left: 'center',
						orient: 'horizontal',
						textStyle: {
							fontSize: 12,
							color: "#666666"
						},
					},
					series: [{
						name: '当前',
						type: 'pie',
						radius: ['40%', '70%'],
						// avoidLabelOverlap: false,
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'top'
						},
						data: state.chartsList
					}]
				});
				window.onresize = function() {
					chart.resize();
				};
			}
			//收益图表生成数据
			const earningsChart = () => {
				// echarts.dispose(chartElement);
				const chartElement = document.getElementById('Echarts');
				echarts.dispose(chartElement);
				let chart = Echarts.init(document.getElementById("Echarts"), "purple-passion");
				chart.setOption({
					tooltip: {
						trigger: 'item'
					},
					title: {
						text: '总收易金额',
						subtext: state.profitTotalAmount,
						left: 'center',
						top: '42%',
						textStyle: {
							fontSize: 13,
							color: '#666666',
							fontWeight: '500'
						},
						subtextStyle: {
							fontSize: 18,
							color: '#3D3D3D',
							fontWeight: 'bold'
						}
					},
					legend: {
						bottom: '-4px',
						left: 'center',
						orient: 'horizontal',
						textStyle: {
							fontSize: 12,
							color: "#666666"
						},
					},
					series: [{
						name: '当前',
						type: 'pie',
						radius: ['40%', '70%'],
						// avoidLabelOverlap: false,
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'top'
						},
						data: state.list
					}]
				});
				window.onresize = function() {
					chart.resize();
				};
			}
			//横条滚动动画
			const abort = (e) => {
				state.timeActive = e
				if (state.timeActive == 0) {
					barRef.value.style.transform = 'translateX(-4px)';
				} else {
					barRef.value.style.transform = 'translateX(170px)';
				}
			}
			// const getList = () => {

			// }
			// const shade=()=>{
			// 	state.show=false
			// }
			// const getFindPageList = () => {
			//     findSetPosFeeList({
			//         currentPage: state.currentPage,
			//         ...state.childData
			//     }).then(res => {
			//         if (res.object.length < 10) {
			//             state.finished = true
			//             state.loading = false
			//         } else {
			//             state.currentPage++
			//             state.finished = false
			//             state.loading = false
			//         }
			//         state.posList = state.posList.concat(res.object)
			//     })
			// }
			return {
				...toRefs(state),
				quantum,
				initChart,
				abort,
				barRef,
				// hours,
				getList,
				earningsChart,
				// updateDays,
				// startDate,
				// endDate,
				getThatday,
				getChannel,
				onConfirm,
				onCancel,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(),
				queryChannel,
				// scroll,
				// scrollend,
				// pickerRef,
				navUrl,
				chooseDate,
				channelShow,
				channelChanse
				// scroll_month,
				// scroll_day,
				// pickerRef_month,
				// pickerRef_day
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-image: url('../../assets/terminal/bacInformation.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 24px;
		box-sizing: border-box;

		// background-color: #f4e6e6;
		.header_box {
			padding: 12px 60px 0px 40px;
			box-sizing: border-box;

			.header {
				padding-top: 12px;
				box-sizing: border-box;

				.date {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
				}
			}
		}

		.choice_box {
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 20px;
			justify-content: space-between;
			width: 100%;

			.week {
				background: #FF2828;
				color: #FFFFFF;
			}

			.today_week {
				color: #333333;
				background: #fff;
			}

			.today {
				width: 103px;
				height: 32px;

				border-radius: 4px 4px 4px 4px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;

			}
		}

		.arrow_down {
			width: 9px;
			height: 5px;
			margin-left: 5px;
		}

		.constent_box {
			padding: 0px 18px;
			margin-top: 20px;
			box-sizing: border-box;
			width: 100%;

			.constent {
				padding: 17px 16px;
				box-sizing: border-box;
				background-color: #fff;
				width: 339px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #3D3D3D;
				border-radius: 6px 6px 6px 6px;
				position: relative;

				.stroke {
					width: 140px;
					height: 82px;
					background: #FFF5F4;
					border-radius: 4px 4px 4px 4px;
					padding: 16px 0px 16px 16px;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #666666;

					.pseudorostrum {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 18px;
						color: #333333;
						margin-top: 8px;
					}
				}

				.stroke_a {
					background: #F0F8FC;
				}

				.money {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #333333;
					justify-content: space-around;
					padding: 0px 4px;
					box-sizing: border-box;
					position: absolute;
					bottom: 20px;
					width: 90%;
				}

				.surface {
					// padding: 22px 48px;
					box-sizing: border-box;
				}
			}
		}

		.client {
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 20px;

			.detail_box {
				border-radius: 6px 6px 6px 6px;
				padding: 16px 18px;
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #3D3D3D;
				background-color: #fff;
				// .detail {
				// 	font-family: PingFang SC, PingFang SC;
				// 	font-weight: 400;
				// 	font-size: 15px;
				// 	color: #3D3D3D;
				// 	margin-left: 12px;
				// }
			}

			.analysis {
				margin-top: 20px;
				background: #FFF9F9;
				border-radius: 4px 4px 4px 4px;
				padding: 16px 20px;
				box-sizing: border-box;



				.totality_font {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #666666;
					margin-left: 12px;
				}

				.totality {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22px;
					color: #333333;
				}

				img {
					width: 30px;
					height: 30rpx;
				}


			}

			.analysis_con {

				justify-content: space-between;
				flex-wrap: wrap;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 13px;
				color: #666666;
				width: 100%;

				.analysis_list {
					margin-top: 20px;
					width: 139px;
					height: 131px;
					// background: #FFF8ED;
					border-radius: 4px 4px 4px 4px;
					padding: 16px 20px;
					box-sizing: border-box;

					.analysis_num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 22px;
						color: #333333;
						margin-top: 16px;
					}

					img {
						width: 30px;
						height: 30px;
					}
				}

				.activation_a {
					background: #FFF8ED;
				}

				.activation_b {
					background: #F3FBFF;
				}

				.activation_c {
					background: #F6FCF1;
				}

				.activation_d {
					background: #FFF6F1;
				}

				.activation_e {
					background: #F8F4FF;
				}

				.activation_f {
					background: #EFFDFC;
				}
			}
		}

		.early_box {
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 10px;

			.early {
				padding: 16px 16px;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 6px 6px 6px 6px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #3D3D3D;

				.analysis {
					width: 299px;
					height: 60px;
					background: #FFF9F9;
					border-radius: 4px 4px 4px 4px;
					margin-top: 20px;
					padding: 20px 20px;
					box-sizing: border-box;

					.nonactivated {
						margin-left: 12px;
					}

					img {
						width: 18px;
						height: 20px;
					}
				}

				.arrowRight {
					width: 20px;
					height: 20px;
				}
			}
		}

		.overlay {
			background-color: rgba(0, 0, 0, 0.2);
			position: fixed;
			top: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden;

			.quantumchannel {
				width: 100%;
				// height: 343px;
				background: #FFFFFF;
				border-radius: 12px 12px 0px 0px;
				position: absolute;
				bottom: 0;
				padding: 23px 0px;
				box-sizing: border-box;

				.quantum_query {
					justify-content: space-between;
					padding-left: 6px;
					padding-right: 6px;
					box-sizing: border-box;
					padding: 0px 18px;
					box-sizing: border-box;

					.cancel {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 15px;
						color: #A7A7A7;
					}

					.ensure {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 15px;
						color: #FF2828;
					}
				}

				.ditch {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #666666;
					background: #EEEEEE;

					padding: 12px 14px;
					box-sizing: border-box;

					border-radius: 6px 6px 6px 6px;
					margin-top: 30px;
				}



				.ditch_left {
					background: #FFDCDC;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #FF2828;

				}

				.ditch_right {
					margin-left: 26px;
				}

				.ditch_rights {
					margin-left: 18px;
				}
			}

			.quantum {
				width: 100%;
				// height: 343px;
				background: #FFFFFF;
				border-radius: 12px 12px 0px 0px;
				position: absolute;
				bottom: 0;
				padding: 23px 18px;
				box-sizing: border-box;





				.ascertain {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;

					justify-content: space-around;
					margin-top: 20px;
					border-bottom: 1px solid #EFEFEF;
					padding-bottom: 11px;
					box-sizing: border-box;
					position: relative;

					.make_animation {}

					.make_time {
						color: #FF2828;
					}

					.sure_time {
						color: #666666;
					}

					.make {
						margin-top: 6px;
					}

					.line_bot {
						width: 20px;
						height: 2px;
						background: #FF2828;
						border-radius: 15px 15px 15px 15px;
						position: absolute;
						bottom: 0;
						left: 25%;
						transition: transform 0.5s;
					}
				}

				.annual_box {
					z-index: 999;

					.annual {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 14px;
						color: #ACACAC;
						// // margin-top: 20px;
						justify-content: space-between;
						padding: 0px 20px;
						box-sizing: border-box;

						.annual_year {
							height: 200px;
							overflow: scroll;

							.choose_time {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 14px;
								color: #FF2828;
								// background: #FFDCDC;
								// width: 100px;
							}
						}
					}

					.annual_choose {
						width: 340px;
						height: 40px;
						background: #FFDCDC;
						border-radius: 6px 6px 6px 6px;
						position: absolute;
						top: 56%;
						justify-content: space-between;
						padding: 0px 20px;
						box-sizing: border-box;
						// opacity: 0.8;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 14px;
						color: #FF2828;
						// left: 50%;
						// transform: translateX(-50%);
						// transform: translateY(-50%);
					}
				}


			}
		}



	}
</style>